
<template>
  <!-- 修改个人信息 -->
	<view>
    <view class="">
      选择一个头像：
    </view>
    <view class="userimg-box">
      <view class="userimg" v-for="(item,i) in userimg" :key="i" @click="userimgs(item)">
        <image :src="item.img" mode=""></image>
      </view>
    </view>
    <view class="image-box">
      <image :src="img" mode=""></image>
    </view>
		<view class="info-list">
			<view class="info-title">
				<text class="tag-title">签名：</text>
				<input class="text-con" v-model="nickname" trim  type="text" value="" />
			</view>
		</view>
		<button class="btn-logout" @click="updateinfo">保存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        userimg:[],// 头像数组
        img:'', // 选择的头像
        nickname:'', // 昵称
        isactive:false
			}
		},
    async onLoad(){
      const {data:res} =await this.$myHttp({
        method:'POST',
        url:'shows/index/nihaoimg',
        data:{
          uid:uni.getStorageSync('uid'),
          token:uni.getStorageSync('token'),
        }
      })
      if(res.code==200){
        this.userimg=res.data
      }
    },
		methods: {
      userimgs(item){
        this.img=item.img
      },
      // 保存个人信息
      async updateinfo(){
        const {data:res} =await this.$myHttp({
          method:'POST',
          url:'shows/Bankcard/up_user_info',
          data:{
            uid:uni.getStorageSync('uid'),
            token:uni.getStorageSync('token'),
            nickname:this.nickname,
            img:this.img
          }
        })
        if(res.code==200){
          uni.showToast({
            title:res.msg,
            icon:'success',
            duration:2000
          })
        }else{
          uni.showToast({
            title:res.msg,
            icon:'none',
            duration:2000
          })
        }
      }
		}
	}
</script>

<style>
  page{
    padding: 40rpx;
    color: #FFFFFF;
    background-color: #121d3d;
  }
  .userimg-box{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 20rpx 0;
  }
  .userimg{
    width: 20%;
    height: 100rpx;
    border: 1px solid #2C405A;
    overflow: hidden;
    margin: 10rpx;
  }
  .userimg image{
    width: 100%;
    height: 100%;
  }
	.info-list {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f6f6f6;
		padding-left: 40rpx;
		color: #acacac;
		height: 90rpx;
		line-height: 90rpx;
	}

	.info-title {
		display: flex;
		justify-content: space-between;
		width: 95%;
	}

	.info-title input {
		border: 1px solid #000000;
		color: gray;
		width: 60%;
		font-size: 28rpx;
		height: 46rpx;
		margin: 22rpx 0;
		border: 1px solid #f6f6f6;
		margin-left: -36rpx;
	}

	.tag-title {
		color: #FFFFFF;
	}
	.btn-logout {
		margin: 160rpx;
		color: #FFFFFF;
		background-color: #5f51fb;
		border-radius: 80rpx;
	}
  .text-con{
    border: 0rpx solid #FFFFFF !important;
  }
  .image-box{
    width: 300rpx;
    height: 300rpx;
  }
  .image-box image{
    width: 100%;
    height: 100%;
  }
</style>

